常用 HTML元素 - 1
先给大家介绍一些常见的 html 元素，先让大家对 不同的 html 元素有不同的作用， 先有个认识。
后面教程还有其它 常用 html 元素的介绍
标题 h1-h6
很多 html网页 是展示文章信息的。
既然是文章，往往就需要有各级标题。
html 可以指定6个级别的标题（heading）
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
h1 到 h6 级别依次递减，
h1 定义最大的标题， h6 定义最小的标题。
显示标题时，浏览器会在该标题上下空出一段距离。
段落 p
html中一段文字，比如一篇文章中的一个自然段，通常放在一个 <p> 标签 （Paragraph）中。
比如：
<p>
目前市场上对API接口做性能测试工具有 Jmeter、LoadRunner、Locust等，
我觉得都不太好用。
它们要么性能不够强，要么不够灵活。
</p>
<p>
所以我自己开发了这款性能测试工具： HyLoad ，
中文名叫 黑羽压测 。
</p>
浏览器显示 段落 之间 会有一定的间隔
一块内容 span
在一个段落中，有时我们需要 对 一小段内容（比如一个名词、一个短语） 做特殊显示，比如特殊的颜色。
这时，可以使用 span 元素
比如
<p>
所以我自己开发了这款性能测试工具：
<span style='color: blue; '>HyLoad</span> ，
中文名叫 <span style='color: green; font-weight: bold;'>黑羽压测</span> 。
</p>
span 里面的内容不会新开一行显示，而是显示在上级元素的所在行，这种特性称之为 inline ，后面会讲到。
所以，span 常见于 p 中， 有时也会出现在其它元素里面，用来保证这块内容 和前后内容在一行显示。
换行 br
html文档中的直接换行， 是不会在浏览器呈现结果页面中产生新行的。
如果需要换行，可以使用 br 元素，
写法可以是 <br /> 或者 <br>
br元素 的作用是：它后面的任何内容都从下一行开始
比如：
<p>
目前市场上对API接口做性能测试工具有 Jmeter、LoadRunner、Locust等，
我觉得都不太好用。<br>
它们要么性能不够强，要么不够灵活。
</p>
<br><br>
<p>
所以我自己开发了这款性能测试工具： HyLoad ，<br>
中文名叫 黑羽压测 。
</p>
你可以尝试一下，去掉 <br> ，对比一下显示效果
专题切换 hr
当一个专题段落描述完毕，要进入下一个专题段落，可以使用 hr 元素，用来表示专题切换。
hr 通常会被浏览器显示为 一个水平横线， 分开前后的内容
比如
<p>
5 + 8 是一个加法表达式，被 Python解释器 执行后，会产生一个新的整数 对象 13。
加号前后 可以有些空格， 也可以没有空格，像这样 5+8
</p>
<hr>
<p>
999 - 111 是一个减法表达式，被Python解释器执行后，会产生一个新的整数对象 888
</p>
超链接 a
html 网页最方便的功能之一就是：可以通过 超链接 方便的跳转到其它网页地址 或者本网页的其它地方。
超链接是通过 标签 a （anchor锚点）实现的，链接到哪里由 属性 href 指定
比如：
<p>
<a href='heading.html'>第1章:标题</a>
<br><br>
<a href='prac/p1.html'>去做其它练习</a>
<br><br>
<a href='../python/intro.html'>Python教程</a>
<br><br>
<a href='/index.html'>返回首页</a>
<br><br>
<a href='https://www.bilibili.com/video/BV1GJ411q7io/' target='_blank'>点击这里</a>
了解白月黑羽和学员的交流
<br><br>
</p>
href 属性的值就是链接的目标路径，可以使用
-
相对路径
比如：
heading.html， 就是当前html文档同一级目录下 的 heading.htmlprac/p1.html， 就是当前html文档同一级目录下 的 子目录 prac 里面的 p1.html../python/intro.html， 就是当前html文档上级目录下 的 子目录 python 里面的 intro.html -
全路径
比如：
/heading.html，就是网站根目录下面的 heading.html ，最前面的斜杆表示网站根目录再比如
/tut/python/intro.html -
带域名的全路径
比如：
https://www.bilibili.com/video/BV1GJ411q7io/这样就可以跳转到其它网站了
如果其它网站和本网站使用同样的协议，可以简写为
//www.bilibili.com/video/BV1GJ411q7io/
a元素的属性 target 的值 指定了在哪里打开新的链接
常见的是
- _self （缺省）
就在当前窗口打开新的链接，原来显示的内容会被替代。
这是缺省情况，没有target属性就是指 _self
- _blank
新打开一个窗口，显示链接网址的内容
如果链接 href 的值以 # 开头，是表示 链接到本网页的一个指定位置上，
如下所示
<body>
<a href='#info'>查看学员就业信息</a>
<a href='heading.html'>第1章:标题</a>
<a href='prac/p1.html'>去做其它练习</a>
<br><br>
<a href='https://www.bilibili.com/video/BV1GJ411q7io/' target='_blank'>点击这里</a>
了解白月黑羽和学员的交流
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p>中间的一些其它信息</p>
<br><br>
<br><br>
<h3 id='info'>学员就业信息</h3>
<p>张三： 跳槽自动化测试</p>
<p>李四： 跳槽测试开发</p>
<p>王五： 跳槽前端开发</p>
</body>
第一个链接 href 里面的 #info 表示链接到本网页 一个 id值为 info 的元素所在的位置。
点击这个链接，浏览器就会把这个 链接目标元素 显示在当前窗口的可见位置（尽量显示在开头）。
强调 strong b em mark
<strong> 元素用于“非常重要”的内容，表示重要性。
比如：警告语句，或者特别需要注意的部分。
通常，strong 元素使用粗体字重呈现。
比如：
<body>
<p>
最重要的规则，无论他怎么哭，无论他怎么乞求，你都不能忘记的规则：
<strong>永远不要在午夜喂食</strong>
</p>
</body>
类似用于吸引读者注意的元素还有 b 、 em、 mark ，
浏览器通常把 b 也是展示为粗体， em展示为斜体, mark展示为高亮
都是为了突出它们和周边内容的不同，虽然官方文档描述它们各自有其不同的使用场景，我也不是很分得清，往往根据喜好挑选使用。
<body>
<p>
最重要的规则，<em>无论他怎么哭，无论他怎么乞求</em>，你都不能忘记的<mark>规则</mark>是：
<b>永远不要在午夜喂食</b>
</p>
</body>
图片 img
img 标签用于在网页中嵌入图片。
如下所示：
<img src="https://cdn2.byhy.net/imgs/logo01.png"
alt="白月黑羽logo">
目前（2022年）主流浏览器支持的图片格式有：apng、avif、gif、jpeg、png、svg、webp
img标签 常见的属性有：
- src
指定要嵌入的图像的url路径 ，可以使用相对路径、全路径、带域名的全路径。
路径概念和 a标签的 href属性 一致。
- alt
指定图像的替代文本，如果指定图像不能显示出来（网络原因或者图像资源不存在）， 显示alt属性指定的文本
- width、height
width、height 分别指定显示图像的宽度和高度，单位是像素点。
如果 width、height 只指定其中一个，浏览器会自动进行宽度和高度的等比例缩放。
如果 width、height 全部指定， 则按要求进行宽度高度 各自 缩放。
比如：
<img src="https://cdn2.byhy.net/imgs/logo01.png"
alt="白月黑羽logo"
width='40'>
预格式化 pre
前面学过的元素 p、 span ， 它们 内部 的文本里面
-
包含的换行，展示时并不能显示下一行 。
-
包含连续的空格，只能显示为一个空格，
比如
<h1>今日
新 闻</h1>
<p>
大家 好
今天的 新闻有：
<span style='color:green'>白月黑羽 日活用户突破3万</span>
</p>
可以使用
强行换行， 空格可以使用
如下所示，
<h1>今日<br>
新 闻</h1>
<p>
大家 好<br>
今天的 新闻有： <br><br>
<span style='color:green'>白月黑羽 日活用户突破3万</span>
</p>
但是这样毕竟还是太麻烦了
我们可以使用 pre 元素
pre 元素 完全按照 HTML 文件中所写的方式呈现的文本。
<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>